<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'image' }">图片内容</el-breadcrumb-item>
      <el-breadcrumb-item>增加图片</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col :span="24">
        <h4>选择图片类型</h4>

        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ defaultMenu }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in menus" :key="item.id" :index="item[1]" :command="index.toString()">{{ item[0] }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <blank />

    <el-row class="upload-container">
      <el-col :span="24">
        <h4>选择图片文件</h4>

        <el-upload
          class="upload"
          drag
          :action="fileServer"
          :mutiple="true"
          :on-success="uploadOK">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <h4>保存图片</h4>
        <el-button type="success" size="large" @click="save()">提交图片</el-button>
      </el-col>
    </el-row>

    <blank />
  </el-row>
</template>

<script>
import blank from '@/components/Blank'
import { Message } from 'element-ui'
import ax, { errhandler, domain } from '@/api/_axios-config'
import * as apis from '@/api/_api'

export default {
  name: 'addimg',
  data () {
    return {
      menus: [
        ['首页轮播', '100'],
        ['首页菜单', '101'],
        ['首页其他', '102'],
        ['保障详情图', '1020'],
        ['日常保洁详情', '200'],
        ['开荒保洁详情', '300'],
        ['空调清洗详情', '400'],
        ['油烟机清洗详情', '500'],
        ['玻璃清洗详情', '600'],
        ['地毯清洗详情', '700'],
        ['包月服务详情', '800'],
        ['定制服务详情', '900'],
        ['展示详情用图', '1000']
      ],
      defaultMenu: '首页轮播',
      position: 100,
      data: [],
      fileServer: apis.FILE_UPLOAD
    }
  },
  methods: {
    handleCommand (command) {
      var index = parseInt(command)
      this.defaultMenu = this.menus[index][0]
      this.position = parseInt(this.menus[index][1])
    },
    uploadOK (response, file, fileList) {
      var prefix = domain
      var path = prefix + response
      this.data.push(path)
    },
    save () {
      if (this.data === [] || this.data.length <= 0 || !this.data) {
        Message.error('未选择任何图片')
        return
      }
      let payload = { Position: this.position, ImagePath: this.data }

      ax.post(apis.ADDIMAGE, payload).then(
        response => {
          var result = response.data
          if (result.BoolStatus) {
            Message.success('保存图片成功')
          } else {
            Message.error(result.Message)
          }
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    }
  },
  components: { blank }
}
</script>

<style lang="stylus">

.el-dropdown-link
  cursor pointer
  color #20a0ff

.upload-container
  width 360px
</style>
